import React from 'react'
import styled from 'styled-components'

const Li = styled.li`
    padding:0 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: rgb(0 0 0 / 13%) 0px 1px 4px 0px;
    border-radius: 4px;
    header {
        display: flex;
        h3 {
            color:#8BC264;
        }
        display: flex;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        img{
            margin-bottom: 6px;
            max-width: 600px;
            @media (max-width: 500px){
               max-width: 300px;
            }
        }
    }
    .urls{
        margin:8px;
        display: flex;
        justify-content: flex-end;
        margin-bottom: 12px;
    }

`;
interface Props {
    title: string;
    codeUrl: string;
    previewUrl: string;
    children: JSX.Element;
    imgUrl: string;
}


export default function ProjectItem(props: Props) {
    const { title, codeUrl, previewUrl, children, imgUrl } = props
    return (
        <Li>
            <header>
                <h3>{title}</h3>
                <img src={imgUrl} alt="" />

            </header>
            <div >{children}</div>
            <div className="urls">
                {
                    codeUrl !== '#' ?
                        <>
                            <a href={codeUrl} style={{ marginRight: 5 }}>源码链接</a>
                            <a href={previewUrl}>项目预览</a>
                        </>
                        :
                        <a href={'javascript:;'} >代码归公司所有,无代码展示</a>
                }

            </div>
        </Li>
    )
}
